<template>
    <view class="orderCardBox" @tap="toDetail">
        <view class="orderTitle">
            <view class="code">
                订单编号：{{item.code}}
            </view>
            <view class="status">
                {{item.status | orderStatus}}
            </view>
        </view>
        <view class="listBox">
            <productCardOrder
                v-for="(proItem,index) in item.proList"
                :key="index"
                :proItem="proItem"
            />
        </view>
        <view class="infoBox">
            <view class="date">
                {{item.time}}
            </view>
            <view class="totalBox">
                共{{item.proList.length}}件商品，合计：<text>1909.00</text>
            </view>
        </view>
		
		<view class="btnBox">
			<view v-if="item.status === 1" class="btn ljzf">立即支付</view>
			<view v-if="item.status === 3" class="btn qrsh">确认收货</view>
			<view v-if="item.status === 4" class="btn scdd">删除订单</view>
		</view>
    </view>
</template>

<script>
    import { productCardOrder } from "@/components/productCardOrder.vue"
    export default {
        components: {
            productCardOrder
        },
        props: {
            item: Object
        },
		methods: {
			toDetail() {
				uni.navigateTo({
					url: '/pages/order/orderDetail?id=' + this.item.id
				})
			}
		}
    }
</script>

<style lang="scss" scoped>
    .orderCardBox {
        background-color: $uni-bg-color;
        margin: 30rpx;
        padding: 20rpx;
        border-radius: $uni-border-radius-llg;
        .orderTitle {
            padding: 20rpx 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .code {
                font-size: 30rpx;
                color: $uni-text-color-grey-6;
            }
            .status {
                font-size: 30rpx;
                color: $uni-text-color-money;
            }
        }
		.infoBox {
			display: flex;
			justify-content: space-between;
			.date {
				font-size: 24rpx;
				color: $uni-text-color-grey-9;
			}
			.totalBox {
				font-size: 28rpx;
				color: $uni-text-color-black;
				text {
					color: $uni-text-color-money;
				}
			}
		}
		
		.btnBox {
			margin-top: 20rpx;
			display: flex;
			justify-content: flex-end;
			.btn {
				width: 240rpx;
				height: 80rpx;
				border-radius: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.ljzf,
			.qrsh {
				background: $uni-bg-color-btn;
				color: $uni-text-color-inverse;
			}
			.scdd {
				border: 1px solid $uni-color-primary;
				color: $uni-color-primary;
			}
		}
	}
</style>